iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
0
自我挑戰組

CSS 大全(第四版)閱讀筆記系列 第 8

Day8【主題二:轉場】_控制轉場步調的機制/延遲轉場時間

  • 分享至 

  • xImage
  •  

transition-timing-function:控制轉場步調的機制

  • 屬性ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end|steps(n,start)|steps(n,end)|cubic-bezier(x1,y1,x2,y2)

  • 三次貝茲函式的關鍵字

  • https://ithelp.ithome.com.tw/upload/images/20190911/20111892Tcq2cpTh93.png

  • 網頁工具:
    https://cubic-bezier.com/#.17,.67,.83,.67
    https://easings.net/

  • 步進函數:將轉場平分為時間相等的步驟

  • https://ithelp.ithome.com.tw/upload/images/20190909/20111892RXn1V8XZWj.png

  • transition-delay:延遲轉場時間

  • transition:縮寫屬性(縮寫預設值):
      > transition-property:all
      > transition-timing-function:ease
      > transition-delay:0s


上一篇
Day7【主題二:轉場】_CSS轉場/轉場屬性
下一篇
Day9【主題二:轉場】_過場回到原始狀態/可動畫屬性/列印轉場...
系列文
CSS 大全(第四版)閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言